@page "/scheduler/cell-dimensions"

@using Syncfusion.Blazor.Schedule
@inherits SampleBaseComponent;

<SampleDescription>
    <p> This demo shows how to set the width and height of the cells by overriding the default CSS classes, so that the Schedule events can be viewed in a zoomed in style.</p>
</SampleDescription>
<ActionDescription>
    <p>In this demo, the height and width of the Scheduler cells are set by overriding the default CSS class.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="schedule-wrapper">
        <SfSchedule TValue="ScheduleData.AppointmentData" Width="100%" CssClass="schedule-cell-dimension" Height="650px" @bind-SelectedDate="@CurrentDate">
            <ScheduleEventSettings DataSource="@DataSource">
            </ScheduleEventSettings>
            <ScheduleViews>
                <ScheduleView Option="View.Day"></ScheduleView>
                <ScheduleView Option="View.Week"></ScheduleView>
                <ScheduleView Option="View.WorkWeek"></ScheduleView>
                <ScheduleView MaxEventsPerRow="6" Option="View.Month"></ScheduleView>
                <ScheduleView MaxEventsPerRow="14" Option="View.TimelineWeek"></ScheduleView>
                <ScheduleView MaxEventsPerRow="14" Option="View.TimelineMonth"></ScheduleView>
            </ScheduleViews>
        </SfSchedule>
    </div>
</div>

@code{
    private DateTime CurrentDate = new DateTime(2020, 1, 9);
    public List<ScheduleData.AppointmentData> DataSource = new ScheduleData().GetScheduleData();
}

<style>
    .schedule-cell-dimension.e-schedule .e-vertical-view .e-date-header-wrap table col,
    .schedule-cell-dimension.e-schedule .e-vertical-view .e-content-wrap table col {
        width: 200px;
    }

    .schedule-cell-dimension.e-schedule .e-vertical-view .e-time-cells-wrap table td,
    .schedule-cell-dimension.e-schedule .e-vertical-view .e-work-cells {
        height: 100px;
    }

    .schedule-cell-dimension.e-schedule .e-month-view .e-work-cells,
    .schedule-cell-dimension.e-schedule .e-month-view .e-date-header-wrap table col {
        width: 200px;
    }

    .schedule-cell-dimension.e-schedule .e-month-view .e-work-cells {
        height: 200px;
    }

    .schedule-cell-dimension.e-schedule .e-timeline-month-view .e-content-wrap table col,
    .schedule-cell-dimension.e-schedule .e-timeline-view .e-content-wrap table col {
        width: 100px;
    }

    .schedule-cell-dimension.e-schedule .e-timeline-view .e-work-cells,
    .schedule-cell-dimension.e-schedule .e-timeline-month-view .e-work-cells {
        height: 600px;
    }
</style>